<template>
    <div id="box">
        <el-row>
            <el-col :span="22" :push="1">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="油卡列表" name="first">
                        <div class="grid-content bg-purple" style="height: 77px; float: left;">
                            <span style="line-height: 77px; font-size: 14px"> </span>
                            <span style="margin-left: 20px">
                                <el-button type="primary" size="small" @click="addCarFuelcard">添加油卡</el-button>
                            </span>
                            <div style="width: 800px; float: right; margin-top: 22px;margin-left: 40px;">
                                <el-form :inline="true" :model="formInline" size="mini" class="demo-form-inline">
                                    <el-form-item label="油卡名称">
                                        <el-input v-model="formInline.fuelcardName" placeholder="油卡名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="油卡类型">
                                        <el-select v-model="formInline.fuelcardType" placeholder="油卡类型">
                                            <span v-for="(item, index) in carStates" :key="index">
                                                <el-option :label="item.label" :value="item.value"></el-option>
                                            </span>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                                        <el-button type="primary" @click="reset">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="grid-content bg-purple" style="height: 400px">
                            <el-table :data="tableData" border style="width: 100%">
                                <el-table-column prop="fuelcardName" label="油卡名称" width="300">
                                </el-table-column>
                                <el-table-column prop="fuelcardType" label="类型" width="180">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.fuelcardType == 0">中石油</span>
                                        <span v-if="scope.row.fuelcardType == 1">中海油</span>
                                        <span v-if="scope.row.fuelcardType == 2">中石化</span>
                                        <span v-if="scope.row.fuelcardType == 3">其他</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fuelcardMoney" label="当前余额">
                                </el-table-column>
                                <el-table-column prop="nickName" label="添加人">
                                </el-table-column>
                                <el-table-column prop="createTime" label="添加时间">
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="140">
                                    <template slot-scope="scope">
                                        <el-button @click="detailsClick(scope.row.id, true)" type="text"
                                            size="small">查看</el-button>
                                        <el-button @click="rejectClick(scope.row.id)" type="text"
                                            size="small">修改</el-button>
                                        <el-button @click="delectClick(scope.row.id)" type="text"
                                            size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div class="grid-content bg-purple-dark">
                                <div class="block">
                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                        :current-page="pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize"
                                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>

                        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                            <span>
                                <el-form ref="form" :model="form" label-width="80px">
                                    <span v-model="form.id" hidden></span>
                                    <el-form-item label="油卡名称">
                                        <el-input v-model="form.fuelcardName" :disabled="flag"></el-input>
                                    </el-form-item>
                                    <el-form-item label="油卡类型">
                                        <el-select v-model="form.fuelcardType" placeholder="油卡类型" :disabled="flag">
                                            <span v-for="(item, index) in carStates" :key="index">
                                                <el-option :label="item.label" :value="item.value"></el-option>
                                            </span>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="余额">
                                        <el-input v-model="form.fuelcardMoney" style="width: 100px;"
                                            :disabled="flag"></el-input>元
                                    </el-form-item>
                                    <el-form-item label="备注">
                                        <el-input type="textarea" v-model="form.fuelcardRemark" maxlength="100"
                                            :disabled="flag"></el-input>
                                    </el-form-item>
                                </el-form>
                            </span>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="dialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="onaddSubmit">确 定</el-button>
                            </span>
                        </el-dialog>
                    </el-tab-pane>
                    <el-tab-pane label="充值明细" name="second">
                        <div class="grid-content bg-purple" style="height: 77px; float: left;">
                            <span style="line-height: 77px; font-size: 14px"> </span>
                            <span style="margin-left: 20px">
                                <el-button type="primary" size="small" @click="addCarrechargerecord">添加充值记录</el-button>
                            </span>
                            <div style="width: 1000px; float: right; margin-top: 22px;margin-left: 40px;">
                                <el-form :inline="true" :model="formInline2" size="mini" class="demo-form-inline">
                                    <el-form-item label="油卡名称">
                                        <el-input v-model="formInline2.fuelcardName" placeholder="油卡名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="油卡类型">
                                        <el-select v-model="formInline2.fuelcardType" placeholder="油卡类型">
                                            <span v-for="(item, index) in carStates" :key="index">
                                                <el-option :label="item.label" :value="item.value"></el-option>
                                            </span>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-date-picker v-model="formInline2.releaseTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit1">搜索</el-button>
                                        <el-button type="primary" @click="reset1">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="grid-content bg-purple" >
                            <el-table :data="tableData2" border style="width: 100%">
                                <el-table-column prop="fuelcardName" label="油卡名称" width="200">
                                </el-table-column>
                                <el-table-column prop="fuelcardType" label="类型" width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.fuelcardType == 0">中石油</span>
                                        <span v-if="scope.row.fuelcardType == 1">中海油</span>
                                        <span v-if="scope.row.fuelcardType == 2">中石化</span>
                                        <span v-if="scope.row.fuelcardType == 3">其他</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="summoney" label="充后余额" width="150">
                                </el-table-column>
                                <el-table-column prop="releaseAmount" label="充值金额">
                                </el-table-column>
                                <el-table-column prop="nickName" label="充值人">
                                </el-table-column>
                                <el-table-column prop="releaseTime" label="充值时间">
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="140">
                                    <template slot-scope="scope">
                                        <el-button @click="delectClick1(scope.row.id)" type="text"
                                            size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div class="grid-content bg-purple-dark">
                                <div class="block1">
                                    <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                                        :current-page="pageNum1" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize1"
                                        layout="total, sizes, prev, pager, next, jumper" :total="total1">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="消费明细" name="third">
                        <div class="grid-content bg-purple" style="height: 77px; float: left;">
                            <span style="line-height: 77px; font-size: 14px"> </span>
                            <span style="margin-left: 20px">
                                <el-button type="primary" size="small" @click="addconsumption">添加消费记录</el-button>
                            </span>
                            <div style="width: 1000px; float: right; margin-top: 22px;margin-left: 40px;">
                                <el-form :inline="true" :model="formInline3" size="mini" class="demo-form-inline">
                                    <el-form-item label="油卡名称">
                                        <el-input v-model="formInline3.fuelcardName" placeholder="油卡名称"></el-input>
                                    </el-form-item>
                                    <el-form-item label="消费时间">
                                        <el-date-picker v-model="formInline3.releaseTime" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="油卡类型">
                                        <el-select v-model="formInline3.fuelcardType" placeholder="油卡类型">
                                            <span v-for="(item, index) in carStates" :key="index">
                                                <el-option :label="item.label" :value="item.value"></el-option>
                                            </span>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit2">搜索</el-button>
                                        <el-button type="primary" @click="reset2">重置</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                        <div class="grid-content bg-purple" >
                            <el-table :data="tableData1" border style="width: 100%">
                                <el-table-column prop="fuelcardName" label="油卡名称" width="200">
                                </el-table-column>
                                <el-table-column prop="fuelcardType" label="类型" width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.fuelcardType == 0">中石油</span>
                                        <span v-if="scope.row.fuelcardType == 1">中海油</span>
                                        <span v-if="scope.row.fuelcardType == 2">中石化</span>
                                        <span v-if="scope.row.fuelcardType == 3">其他</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="nickName" label="使用人">
                                </el-table-column>
                                <el-table-column prop="releaseAmount" label="消费金额">
                                </el-table-column>
                                <el-table-column prop="releaseCarnumber" label="车牌号"></el-table-column>
                                <el-table-column prop="releaseTime" label="消费时间">
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" width="140">
                                    <template slot-scope="scope">
                                        <el-button @click="delectClick1(scope.row.id)" type="text"
                                            size="small">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                            <div class="grid-content bg-purple-dark">
                                <div class="block1">
                                    <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                                        :current-page="pageNum2" :page-sizes="[5, 10, 20, 50]" :page-size="pageSize2"
                                        layout="total, sizes, prev, pager, next, jumper" :total="total2">
                                    </el-pagination>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            activeName: "first",
            /////////////////////////////////////////////////
            pageNum: 1,
            pageSize: 5,
            total: 1,
            /////////////////////////////////////////////////
            pageNum1: 1,
            pageSize1: 5,
            total1: 1,
            /////////////////////////////////////////////////
            pageNum2: 1,
            pageSize2: 5,
            total2: 1,
            /////////////////////////////////////////////////
            form: {},
            form1: {},
            //一个页面一个 以此类推
            formInline: {},
            formInline2:{},
            formInline3:{},

            tableData: [],
            tableData1: [],
            tableData2: [],
            title: "",
            flag: false,
            dialogVisible: false,
            carStates: [{ value: "0", label: "中石油" },
            { value: "1", label: "中海油" },
            { value: "2", label: "中石化" },
            { value: "3", label: "其他" }],
        };
    },
    created() {
        //查询油卡信息
        this.getCarFuelcard();
        //查询油卡充值信息
        this.findcarfuelcardrelease();
        //查询油卡消费信息
        this.findcarfuelcardconsume();
    },
    methods: {
        //重置
        reset() {
            this.formInline = {};
            this.getCarFuelcard()
        },
        //查看油卡
        detailsClick(id) {
            this.rejectClick(id)
            this.title = "查看信息"
            this.dialogVisible = true;
            this.flag = true
        },
        //搜索
        onSubmit() {
            this.getCarFuelcard()
        },
        //添加油卡
        addCarFuelcard() {
            this.dialogVisible = true
            this.title = "添加油卡"
            this.form = {}
            this.flag = false
        },
        //添加油卡
        onaddSubmit() {
            if (!this.flag) {
                if (this.form.id != null) {
                    axios.post("carfuelcard/upTCarFuelcard", this.form).then((res) => {
                        console.log(res);
                        if (res.data.code === 200) {
                            this.$message.success(res.data.data)
                        }
                    });
                } else {
                    axios.post("carfuelcard/addTCarFuelcard", this.form).then((res) => {
                        console.log(res);
                        if (res.data.code === 200) {
                            this.$message.success(res.data.data)
                        }
                    });
                }
            }

            this.dialogVisible = false;
            this.getCarFuelcard()
        },
        //删除油卡
        delectClick(id) {
            axios.post("carfuelcard/delTCarFuelcard?id=" + id).then((res) => {
                console.log(res)
                if (res.data.code === 200) {
                    this.$message.success("删除成功")
                    this.getCarFuelcard()
                }
            })
        },
        //回显
        rejectClick(id) {
            this.title = "修改信息"
            this.dialogVisible = true;
            this.flag = false
            this.form = {}
            axios.post("carfuelcard/findTCarFuelcardByid?id=" + id).then((res) => {
                console.log(res);
                this.form = res.data.data
            });
            // this.dialogVisible = false;
            this.form = {}
            this.getCarFuelcard()
        },
        //查询
        getCarFuelcard() {
            axios.post("carfuelcard/findTCarFuelcard?pageSize=" + this.pageSize + "&pageNum=" + this.pageNum, this.formInline).then((res) => {
                console.log(res);
                this.tableData = res.data.data.records;
                this.total = res.data.data.total
            });
        },
        //添加充值记录
        addCarrechargerecord() {
            this.$router.push("/addrelease")
        },
        //查询充值记录
        findcarfuelcardrelease(){
            axios.post("carfuelcardrelease/findcarfuelcardrelease?pageSize=" + this.pageSize1 + "&pageNum=" + this.pageNum1+"&type=0", this.formInline2).then((res)=>{
                console.log(res)
                this.tableData2 = res.data.data.records
                this.total1 = res.data.data.total
            })
        },
        delectClick1(id){
            axios.post("carfuelcardrelease/delById?id="+id).then((res)=>{
                console.log(res)
                if (res.data.code === 200) {
                    this.findcarfuelcardrelease()
                    this.findcarfuelcardconsume()
                    this.$message.success("删除成功")
                }
            })
        },
        //充值搜索
        onSubmit1(){
            this.findcarfuelcardrelease()
        },
        //充值重置
        reset1(){
            this.formInline2={}
            this.findcarfuelcardrelease()
        },
        //查询消费记录
        findcarfuelcardconsume(){
            axios.post("carfuelcardrelease/findcarfuelcardrelease?pageSize=" + this.pageSize1 + "&pageNum=" + this.pageNum1+"&type=1", this.formInline3).then((res)=>{
                console.log(res)
                this.tableData1 = res.data.data.records
                this.total2 = res.data.data.total
            })
        },
        //添加消费记录
        addconsumption(){
            this.$router.push("/addconsume")
        },
        //消费搜索
        onSubmit2(){
            this.findcarfuelcardconsume()
        },
        //消费重置
        reset2(){
            this.formInline3={}
            this.findcarfuelcardconsume()
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.pageSize = val;
            this.getCarFuelcard();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getCarFuelcard();
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange1(val) {
            this.pageSize1 = val;
            this.findcarfuelcardrelease();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange1(val) {
            this.pageNum1 = val;
            this.findcarfuelcardrelease();
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange2(val) {
            this.pageSize2 = val;
            this.findcarfuelcardrelease();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange2(val) {
            this.pageNum2 = val;
            this.findcarfuelcardrelease();
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
    },
};
</script>

<style scoped>
/* element-ui样式 */
.el-row {
    margin-bottom: 10px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple {
    background: #fff;
    border-radius: 10px;
}

/* 自定义样式 */
/* * {
        margin: 0px;
        padding: 0px;
      } */
.box {
    width: 98%;
    height: 100%;
    margin: auto;
    /* background-color: red; */
}

.block {
    padding-top: 20px;
    padding-left: 750px;
}
.block1 {
    padding-top: 20px;
    padding-left: 730px;
    /* border: 1px solid red; */
}
</style>